import React, { Component } from "react";
import { withRouter } from 'react-router-dom';

// antd
import { Form, Input, Button, Row, Col } from "antd";
import { UserOutlined, LockOutlined, LinkOutlined } from "@ant-design/icons";

// 验证
import { num6 } from '../../utils/validate';

// 接口
import { Login } from '../../api/account';

// 组件
import Code from '../../components/Code';

// 加密
import CryptoJs from 'crypto-js';

// 方法
import { setToken } from '../../utils/session.js';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      code: '',
      loading: false,
      module: 'login'
    };
  }

  // 登录
  onFinish = (values) => {
    const { username, password, code } = this.state;
    
    this.setState({
      loading: true
    });
    Login({
      username,
      code,
      password: CryptoJs.MD5(password).toString()
    }).then(res => {
      this.setState({
        loading: false
      });

      // 获取token
      const data = res.data.data;
      // 存储token
      setToken(data.token);

      // 路由跳转
      this.props.history.push('/index');
    });
    console.log("Received values of form: ", values);
  };
  

  // 数据绑定 begin
  
  // 用户名变更
  inputChangeUsername = (e) => {
    this.setState({
      username: e.target.value
    });
  }
  
  // 密码变更
  inputChangePassword = (e) => {
    this.setState({
      password: e.target.value
    });
  }
  
  // 验证码变更
  inputChangeCode= (e) => {
    this.setState({
      code: e.target.value
    });
  }
  // 数据绑定 end
  
  
  render() {
    const { 
      username, 
      password, 
      code,
      loading,
      module
    } = this.state;

    return (
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={this.onFinish}
      >
        <Form.Item
          name="username"
          rules={[
            { required: true, message: "邮箱不能为空" },
            { type: "email", message: "邮箱格式不正确"}
          ]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="用户名"
            value={ username }
            onChange={ this.inputChangeUsername }
          />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[
            { required: true, message: "密码不能为空" },
            // { min: 6,message:'密码长度为6位'},
            // { max: 6,message:'密码长度为6位'},
            { pattern: num6, message: '密码为6位数字' }
          ]}
        >
          <Input.Password
            prefix={<LockOutlined className="site-form-item-icon" />}
            placeholder="密码"
            value={ password }
            onChange={ this.inputChangePassword }
          />
        </Form.Item>

        <Form.Item
          name="code"
          rules={[
            { required: true, message: "验证码不能为空" },
            { len: 6, message: '长度为6位的验证码' }
          ]}
        >
          <Row gutter={13}>
            <Col span={15}>
              <Input
                prefix={<LinkOutlined className="site-form-item-icon" />}
                placeholder="验证码"
                value={ code }
                onChange={ this.inputChangeCode }
              />
            </Col>
            <Col span={9}>
              <Code username={ username } module={ module } ></Code>
            </Col>
          </Row>
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            block
            loading={ loading }
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default withRouter(LoginForm);
